<script setup lang="ts">
import { ref } from 'vue'

const imgUrl = ref('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')
const msg = ref('百度一下')

const flag = ref(0)
</script>

<template>
  <div>
    <!-- 特殊情况---根据下标点击切换 -->
    <div class="box" :class="{ active: flag === 0 }" @click="flag = 0">选项1</div>
    <div class="box" :class="{ active: flag === 1 }" @click="flag = 1">选项2</div>
  </div>
  <!-- 传图片---动态获取v-bind -->
  <img v-bind:src="imgUrl" v-bind:alt="msg" />
  <!-- 简写----: -->
  <img :src="imgUrl" :alt="msg" />
</template>

<style>
.box {
  width: 200px;
  height: 80px;
  background-color: pink;
}
.active {
  width: 200px;
  height: 80px;
  background-color: aqua;
  font-weight: 600;
  color: red;
}
</style>
